<template>
  <div class="task-list">
    <div v-for="(item, index) in props.items" :key="index" class="item">
      <div class="main">
        <div class="header-name-img">
          <!-- 头部 -->
          <div class="content">
            <div class="header">
              <div class="header-title" :title="item.name">
                {{ item.name }}
                <span v-if="!(item.type === 0)">（{{ item.type === 1 ? 'MJ' : 'SD' }}模式）</span>
              </div>
              <div v-if="item.isCreator" class="header-isCreator">我创建的</div>
            </div>
            <div class="right-detail">
              <!-- 任务目标 -->
              <div class="course-time">
                <div class="left">
                  <div class="status" :style="{'background-color':statusColor(item.status as number)}">
                    {{ filterStatus(item.status as number) }}
                  </div>
                  <div class="time">
                    截止时间：
                    <span v-if="item.status !== 3">{{ item.endTime ? item.endTime : '-' }}</span>
                    <span v-if="item.status === 3">不限制</span>
                  </div>
                </div>
                <div class="course" :title="`搭配课程“${item.courseChapter}”学习`">
                  搭配课程“{{ item.courseChapter ? item.courseChapter : '暂无' }}”学习
                </div>
              </div>
              <!--  -->
              <div class="description" :title="item.missionObjective as string">任务目标：{{ item.missionObjective }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div>
          <div v-if="item.status !== 0" class="experience">
            <div class="had">
              <!--  -->
              <span>{{ item.submitCount }}</span
              >已提交
            </div>
            <div class="line"></div>
            <div class="not">
              <span>{{ item.unSubmitCount }}</span
              >未提交
            </div>
            <div class="line"></div>
            <div class="not">
              <span>{{ item.unEvaluateCount }}</span
              >未评价
            </div>
          </div>
        </div>
        <div class="action">
          <a-button v-if="item.isCreator" type="text" class="pt-10 pl-12" @click="del(item.id as string)"
            ><img class="w-16 h-16" src="@/assets/img/admin/learning-case/delete-bin-6-line.svg" alt=""
          /></a-button>
          <a-button v-if="item.isCreator" type="text" class="pt-10 pl-12" @click="handleEdit('edit', item)"
            ><img class="w-16 h-16" src="@/assets/img/admin/learning-case/edit-line.svg" alt=""
          /></a-button>
          <a-button @click="evaluate(item)">评价</a-button>

          <a-button @click="publish(item.id as string, item.isCreator as string)">发布</a-button>
        </div>
      </div>
    </div>
    <!-- 体验统计 -->
    <caseStatistics :id="caseStatisticsId" ref="caseStatisticsRef" :org-id="props.orgId" :open="caseStatisticsFlag" />
  </div>
</template>

<script setup lang="ts">
  import { PropType, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { PropsItem } from '../../types'
  const router = useRouter()

  import caseStatistics from '../../components/case-statistics/index.vue'

  const props = defineProps({
    items: {
      type: Object as PropType<PropsItem[]>,
      required: true
    },
    orgId: {
      type: String,
      default: ''
    }
  })

  const caseStatisticsRef = ref()
  const emits = defineEmits(['initData', 'del', 'publish'])

  // 处理状态
  const filterStatus = (status: number) => {
    switch (status) {
      case 0:
        return '未发布'
      case 1:
        return '进行中'
      case 2:
        return '已截止'
      case 3:
        return '进行中'

      default:
        break
    }
  }

  // 处理颜色
  const statusColor = (status: number) => {
    switch (status) {
      case 0:
        return 'rgba(100, 154, 240, 1)'
      case 1:
        return 'rgba(146, 219, 155, 1)'
      case 2:
        return 'rgba(0, 0, 0, 0.3)'
      case 3:
        return ''

      default:
        break
    }
  }

  const caseStatisticsFlag = ref<boolean>(false)
  const caseStatisticsId = ref<string>('')
  const del = (id: string) => {
    emits('del', id)
  }
  //编辑
  const handleEdit = (type: 'add' | 'edit', item?: any) => {
    if (type === 'add') {
      router.push(`/admin/learning-tasks-manage/add`)
      return
    }
    router.push(`/admin/learning-tasks-manage/edit/${item?.id}`)
  }

  // 体验
  const publish = (id: string, isCreator: string) => {
    emits('publish', id, isCreator)
  }

  // 评价
  const evaluate = (item: PropsItem) => {
    const key = props.items[0].type === 0 ? 'dialog' : 'draw'
    console.log(
      `/admin/learning-tasks-manage/${key}-detail/?id=${item.id}&name=${item.name}&type=${props.items[0].type}&orgId=${props.orgId}`
    )

    router.push(
      `/admin/learning-tasks-manage/${key}-detail/?id=${item.id}&name=${item.name}&type=${props.items[0].type}&orgId=${props.orgId}`
    )
  }
</script>

<style lang="less" scoped>
  .task-list {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;

    .item {
      position: relative;
      // display: flex;
      width: 49%;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 12px;

      .main {
        padding: 16px 24px;
        // padding-bottom: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);

        .header-name-img {
          display: flex;

          .img {
            margin-right: 24px;
          }

          .content {
            width: 100%;

            .right-detail {
              z-index: 99;
              width: 100%;

              .course-time {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
                color: rgba(17, 22, 31, 0.75);

                .left {
                  display: flex;
                  align-items: center;

                  .status {
                    padding: 0 4px;
                    height: 20px;
                    font-size: 12px;
                    color: #fff;
                    background: #92db9b;
                    border-radius: 4px;
                    line-height: 20px;
                  }

                  .time {
                    display: flex;
                    justify-content: center;
                    // align-items: center;
                    padding: 2px 12px;
                    // width: 182px;
                    font-size: 12px;
                    border-radius: 12px;
                    line-height: 20px;
                  }
                }

                .time {
                  max-width: 204px;
                }

                .course {
                  display: flex;
                  display: -webkit-box;
                  justify-content: center;
                  overflow: hidden;
                  // align-items: center;
                  padding: 0 12px;
                  padding: 2px 12px;
                  max-width: 216px;
                  height: 24px;
                  font-size: 12px;
                  text-overflow: ellipsis;
                  white-space: normal;
                  color: rgba(17, 22, 31, 0.75);
                  border: 1px solid #e8e9eb;
                  border-radius: 12px;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  line-height: 20px;
                }
              }

              .task-target {
                display: -webkit-box;
                overflow: hidden;
                margin-bottom: 12px;
                height: 40px;
                font-size: 12px;
                text-overflow: ellipsis;
                white-space: normal;
                color: rgba(17, 22, 31, 0.52);
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 20px;
              }

              .description {
                display: -webkit-box;
                overflow: hidden;
                width: 100%;
                // height: 40px;
                font-size: 12px;
                text-overflow: ellipsis;
                color: rgba(17, 22, 31, 0.75);
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                line-height: 20px;

                .time {
                  padding: 2px 12px;
                  background-color: @background2;
                  border-radius: 12px;
                }
              }
            }

            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 12px;
              width: 100%;
              height: 24px;

              .header-title {
                display: -webkit-box;
                overflow: hidden;
                width: 90%;
                font-size: 18px;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                color: rgba(21, 23, 27, 0.95);
                font-weight: 700;

                .sd-mj {
                  display: inline-block;
                  justify-content: center;
                  align-items: center;
                  padding: 0 8px;
                  margin-right: 4px;
                  height: 20px;
                  font-size: 12px;
                  color: rgba(255, 255, 255, 1);
                  background: rgba(0, 0, 0, 0.3);
                  border-radius: 12px;
                  line-height: 20px;
                  gap: 2px;
                }
              }

              .header-isCreator {
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                padding: 2px 8px;
                font-size: 12px;
                text-overflow: ellipsis;
                color: #f59700;
                background: rgba(245, 151, 0, 0.1);
                border-radius: 4px;
                line-height: 20px;
                gap: 2px;
              }
            }
          }
        }
      }

      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        width: 100%;

        .experience {
          display: flex;
          justify-content: center;
          align-items: center;
          -webkit-line-clamp: 1;
          padding: 2px 8px;
          font-size: 12px;
          color: rgba(17, 22, 31, 0.75);
          border-radius: 4px;
          line-height: 20px;
          gap: 8px;

          .line {
            width: 1px;
            height: 12px;
            background: rgba(0, 0, 0, 0.05);
          }

          span {
            display: inline-block;
            margin-right: 2px;
            font-size: 24px;
            color: rgba(0, 156, 248, 1);
            font-weight: 700;
          }
        }

        .action {
          display: flex;
          align-items: center;
          gap: 16px;
        }
      }
    }
  }
</style>
